<template>
  <div v-if="isDetail">
    <div v-if="linkList.length">
      <div v-for="(item,index) in linkList" :key="index">
        <div class="link">
          <el-tooltip :open-delay="500" placement="top-start" effect="dark">
            <div slot="content" style="max-width: 240px;">{{ item.url }}</div>
            <a
              :href="item.url"
              target="_blank"
              class="name link-name">
              <img :src="linkIcon" alt="">
              <span>{{ item.name }}</span>
            </a>
          </el-tooltip>
        </div>
      </div>
    </div>
    <div v-else>--</div>
  </div>
  <div v-else>
    <div class="link-input">
      <div v-for="(item,index) in linkList" :key="index" :class="{'mobile-item':showMobilePage}" class="item">
        <el-input v-inputFocus="item.autofocus" v-model="item.name" :class="{'is-error':errIds.includes(`name_${item._uuid}`)}" :style="{ 'margin-bottom': showMobilePage ? '12px' : '0' }" type="text" size="small" maxlength="50" class="width240" placeholder="请输入链接名称" @blur="inputBlur"/>
        <el-input v-model="item.url" :class="{'is-error' : errIds.includes(`url_${item._uuid}`)}" type="text" size="small" maxlength="500" class="url-width" placeholder="请输入链接" @blur="inputBlur(item.url,item._uuid,true)">
          <el-select slot="prepend" v-model="item.urlPrepend" placeholder="请选择" clearable>
            <el-option label="http://" value="http://"/>
            <el-option label="https://" value="https://"/>
          </el-select>
        </el-input>
        <span v-if="!isDetail" :class="{'mobile-del':showMobilePage}" class="btn del" @click="toDelete(index)">删除</span>
        <div v-if="linkList.length && showMobilePage && index === linkList.length-1" class="add border-left mobile-add">
          <span @click="addItem()">添加链接
            <img :src="linkIcon" alt="" class="img">
          </span>
        </div>
      </div>
    </div>
    <div v-if="!showMobilePage || !linkList.length" class="add">
      <span @click="addItem()">添加链接
        <img :src="linkIcon" alt="" class="img">
      </span>
    </div>
  </div>
</template>
<script>
import linkIcon from '@/assets/medium/link_icon.png';
import { mapState } from 'vuex';
export default {
  directives: {
    inputFocus: {
      inserted(el, binding) {
        if (binding.value) {
          el.querySelector('.el-input__inner').focus();
        }
      }
    }
  },
  props: {
    linkList: {
      type: Array,
      default: () => []
    },
    isDetail: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      linkIcon,
      errIds: [],
      select: 'http://'
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    })
  },
  methods: {
    validate() {
      const nameErrArr = this.linkList.filter(el => !el.name);
      const urlErrArr = this.linkList.filter(el => !el.url);
      let errIds = [];
      errIds = errIds.concat(nameErrArr.map(el => `name_${el._uuid}`), urlErrArr.map(el => `url_${el._uuid}`));
      this.errIds = errIds;
      if (nameErrArr.length || urlErrArr.length) {
        this.$message.warning('请检查链接是否填写完整');
        return false;
      }
      return true;
    },
    inputBlur(url = '', _uuid = '', isUrl = false) {
      // if (isUrl) {
      //   var match = /^((ht|f)tps?):\/\/[\w\-]+(\.[\w\-]+)+([\w\-\.,@?^=%&:\/~\+#]*[\w\-\@?^=%&\/~\+#])?$/;
      //   if (!match.test(url)) {
      //     this.errIds.push(`url_${_uuid}`);
      //     this.$message.warning('请检查链接是否正确');
      //     return;
      //   }
      // }
      this.errIds = [];
    },
    addItem() {
      this.$emit('addItem');
    },
    toDelete(index) {
      this.$emit('toDelete', index);
    }
  }
};
</script>
<style lang="scss" scoped>
  .mobile-item {
    flex-wrap: wrap;
    .url-width {
      margin: 0 !important;
    }
    .mobile-add {
      font-weight: bold;
    }
  }
  .item{
    display: flex;
    align-items: center;
    margin-bottom: 12px;
    &:last-child {
      margin-bottom: 6px;
    }
    .long-input{
      margin: 0 12px;
    }
  }
  .add{
    color: #406EFF;
    font-size: 14px;
    cursor: pointer;
    img {
      width: 12px;
      position: relative;
      top: 1px;
    }
  }
  .is-error{
    &::v-deep {
    .el-input__inner {
      border-color: red !important;
    }
    .el-input-group__prepend {
      .el-input__inner{
        border-color: transparent !important;
      }
    }
    .el-textarea__inner{
      border-color: rgb(204, 9, 9) !important;
    }
  }
  }
  .width240 {
    width: 240px;
    &::v-deep {
      .el-select {
        width: 240px;
      }
      .el-tag{
        color: #406EFF;
        background: #EFF3FB;
      }
      .el-input__inner {
        width: 240px;
      }
    }
  }
  .url-width {
    width: 456px;
    margin: 0 12px;
    &::v-deep {
      .el-input__inner {
        width: 456px;
      }
      .el-input-group__prepend {
        color: #333 !important;
        background-color: #fff !important;
        .el-input__inner{
          width: 90px !important
        }
      }
      .el-select{
        width: 90px !important
      }
    }
  }
  .btn, .link, .del{
    font-size: 14px;
    cursor: pointer;
    margin-right: 8px;
    white-space: nowrap;
  }
  .btn, .link{
    color:#406EFF;
  }
  .del{
    color:#192452;
  }
  .mobile-del {
    margin: 0;
    color: #FF4E5F !important;
  }
  .border-left {
    position: relative;
    padding-left:12px;
    margin-left: 12px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -7px;
      width: 1px;
      background: #ddd;
      height: 14px;
    }
  }
  .link{
    display: flex;
    align-items: center;
    width: 240px;
  }
  .link-name {
    color: #406eff;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    img {
      width: 12px;
      position: relative;
      top: 1px;
      margin-left: 3px;
    }
  }
</style>
